<template>
  <a-drawer
    width="90%"
    v-if="state.visible"
    :title="state.title"
    placement="right"
    v-model:visible="state.visible"
    @close="closeDialog"
  >
    <div class="desc">
      <div class="kanban">
        <div
          class="kanban-desc"
          v-for="(item, index) in state.columns"
          :key="index"
        >
          <div class="kanban-desc-label">
            {{ item.label }}
            <template v-if="item.tip">
              <a-tooltip>
                <template #title>{{ item.tip }} </template>
                <InfoCircleOutlined />
              </a-tooltip>
            </template>
            ：
          </div>
          <div class="kanban-desc-value">
            {{
              state.form[item.key] || state.form[item.key] === 0
                ? formatByOptions(item, state.form[item.key])
                : ''
            }}
          </div>
        </div>
        <div class="kanban-desc" v-if="props.type === 1">
          <div class="kanban-desc-label">
            <a-button type="primary" size="small" @click="state.mxShow = true"
              >出入库明细</a-button
            >
          </div>
          <div class="kanban-desc-value"></div>
        </div>
      </div>
      <div>
        <viewImg :src="state.url" class="w80" />
      </div>
    </div>
    <!--    面料展示-->
    <template v-if="props.type === 1">
      <remote-table
        :showSelection="false"
        :rowKey="r => r.id"
        :tableColumns="[]"
        ref="tableRef"
        :menuName="state.menuName"
        :interfaceURL="state.interfaceURL"
        :apiParams="{}"
        :hasRefresh="false"
        :hasReset="false"
        :queryParams="state.queryParams"
      >
        <template #ossUrlCR="{ record }">
          <viewImg :src="record.ossUrl" class="w80" />
        </template>
      </remote-table>
    </template>
    <template v-else>
      <a-table :dataSource="state.spDataSource" :columns="state.spkbColumns">
        <template #ossUrl="{ record }">
          <viewImg :src="record.ossUrl" class="w80" />
        </template>
      </a-table>
    </template>

    <a-drawer
      width="90%"
      v-if="state.mxShow"
      :title="'出入库明细'"
      placement="right"
      v-model:visible="state.mxShow"
      @close="state.mxShow = false"
    >
      <remote-table
        :showSelection="false"
        :rowKey="r => r.id"
        :tableColumns="[]"
        ref="tableRef"
        :hasRefresh="false"
        :hasReset="false"
        :menuName="state.mxMenuName"
        :interfaceURL="state.mxInterfaceURL"
        :apiParams="{}"
        :queryParams="state.mxQueryParams"
      >
        <template #materialOssRelationsCR="{ record }">
          <viewImg :listSrc="getImages(record)" class="w80" />
        </template>
      </remote-table>
    </a-drawer>
  </a-drawer>
</template>
<script>
import { InfoCircleOutlined } from '@ant-design/icons-vue'
const ML_TYPE = 1
const SP_TYPE = 2
const mlConfig = {
  type: ML_TYPE,
  menuName: 'materialPreparationMateriaBoardlMLBL',
  flMenuName: 'materialPreparationAccessoriesBoardlMLBL',
  interfaceURL: 'preparation-plan-mlbl/material-board-list',
  title: '面料看板',
  mxMenuName: 'materialInventoryIODetailsMlbl',
  flMxMenuName: 'materialInventoryIODetailsMlblAccessories',
  mxInterfaceURL: 'inventory-material/list-in-out-details'
}
const spConfig = {
  type: SP_TYPE,
  menuName: 'materialPreparationChengYiBoardMLBL',
  interfaceURL: 'preparation-plan-mlbl/skc-board-list',
  title: '成衣看板',
  mxMenuName: 'clothseInventoryIODetails',
  mxInterfaceURL: 'inventory-clothes/inout-details-clothes'
}
</script>
<script setup>
import {
  businessTypeOptions,
  channelIdOptions,
  classifyOptions
} from '@/views/fabricPreparation/hooks'
import { onMounted, reactive, watchEffect } from 'vue'
import {
  preparation_plan_mlbl_material_board_info,
  preparation_plan_mlbl_skc_board_info,
  preparation_plan_mlbl_skc_board_list
} from 'server/apis/fabricPreparation'
const props = defineProps({
  type: {
    type: Number,
    default: ML_TYPE
  },
  params: {
    type: Object,
    default() {
      return {}
    }
  }
})
const emits = defineEmits(['close'])
const state = reactive({
  classifyOptions: classifyOptions,
  mxShow: false,
  visible: true,
  menuName: mlConfig.menuName,
  interfaceURL: mlConfig.interfaceURL,
  mxMenuName: mlConfig.mxMenuName,
  mxInterfaceURL: mlConfig.mxInterfaceURL,
  title: mlConfig.title,
  queryParams: {},
  mxQueryParams: {},
  skc: '',
  columns: [],
  mlColumns: [
    { label: '物料编号', key: 'materialTypeNo' },
    { label: '物料名称', key: 'materialName' },
    { label: '供应商代码', key: 'factoryCode' },
    { label: '渠道', key: 'channelId', options: channelIdOptions },
    { label: '面料供应商', key: 'supplierName' },
    {
      label: '总库存(米)',
      key: 'inventoryTotal',
      tip: '此物料在当前渠道下所有供应商的库存数量'
    },
    {
      label: '该供应商可用库存(米)',
      key: 'inventory',
      tip: '此物料在当前渠道下此供应商的库存数量'
    }
  ],
  spColumns: [
    { label: 'CP', key: 'cp' },
    { label: 'SKC', key: 'skc' },
    { label: 'BOM版本', key: 'bomVersionStr' },
    { label: '渠道', key: 'channelId', options: channelIdOptions },
    { label: '成衣供应商', key: 'supplierName' },
    { label: '大类', key: 'businessType', options: businessTypeOptions },
    {
      label: '总库存(件)',
      key: 'inventoryTotal',
      tip: '此物料在当前渠道下所有供应商的库存数量'
    },
    {
      label: '该供应商可用库存(件)',
      key: 'inventory',
      tip: '此物料在当前渠道下此供应商的库存数量'
    }
  ],
  form: {},
  url: '',
  spDataSource: [],
  spkbColumns: [
    {
      title: '面料编码',
      dataIndex: 'materialTypeNo',
      key: 'materialTypeNo'
    },
    {
      title: '面料图片',
      dataIndex: 'ossUrl',
      key: 'ossUrl',
      slots: { customRender: 'ossUrl' }
    },
    {
      title: '供应商',
      dataIndex: 'supplierName',
      key: 'supplierName'
    },
    {
      title: '面料颜色',
      dataIndex: 'materialColor',
      key: 'materialColor'
    },
    {
      title: '确认色号',
      dataIndex: 'confirmColor',
      key: 'confirmColor'
    },
    {
      title: '单件用量(m)',
      dataIndex: 'singleDosage',
      key: 'singleDosage'
    },
    {
      title: '可用库存(m)',
      dataIndex: 'availableInventory',
      key: 'availableInventory'
    },
    {
      title: '可生产数量(件)',
      dataIndex: 'producibleQuantity',
      key: 'producibleQuantity'
    }
  ]
})
watchEffect(() => {
  state.skc = props.skc
})

onMounted(() => {
  if (props.type === ML_TYPE) {
    // 面料看板
    state.menuName = mlConfig.menuName
    state.mxMenuName = mlConfig.mxMenuName
    state.columns = state.mlColumns
    if (
      props.params.classify &&
      props.params.classify === classifyOptions[1].value
    ) {
      state.menuName = mlConfig.flMenuName
      state.mxMenuName = mlConfig.flMxMenuName
      state.columns[5].label = '总库存'
      state.columns[6].label = '该供应商可用库存'
    }
    state.interfaceURL = mlConfig.interfaceURL
    state.mxInterfaceURL = mlConfig.mxInterfaceURL
    state.title = mlConfig.title
    state.queryParams = {
      channelId: props.params.channelId ? props.params.channelId : '',
      materialTypeNo: props.params.materialTypeNo
        ? props.params.materialTypeNo
        : '',
      supplierId: props.params.supplierId ? props.params.supplierId : '',
      factoryCode: props.params.factoryCode ? props.params.factoryCode : ''
    }
    state.mxQueryParams = {
      materialTypeNo: props.params.materialTypeNo
        ? [props.params.materialTypeNo]
        : [],
      channelIds: props.params.channelId ? [props.params.channelId] : [],
      supplierId: props.params.supplierId ? [props.params.supplierId] : []
    }
  } else if (props.type === SP_TYPE) {
    state.menuName = spConfig.menuName
    state.interfaceURL = spConfig.interfaceURL
    state.mxMenuName = spConfig.mxMenuName
    state.mxInterfaceURL = spConfig.mxInterfaceURL
    state.title = spConfig.title
    state.queryParams = {
      id: props.params.id,
      inquiryPeriodDetailId: props.params.inquiryPeriodDetailId
    }
    state.mxQueryParams = {
      cp: props.params.cp ? [props.params.cp] : [],
      inquiryPeriodDetailId: props.params.inquiryPeriodDetailId
    }
    state.columns = state.spColumns
    getCyList()
  }
})
function closeDialog() {
  emits('close')
}
onMounted(() => {
  getFormData()
})
async function getFormData() {
  const { success, data } =
    props.type === ML_TYPE
      ? await preparation_plan_mlbl_material_board_info(props.params)
      : await preparation_plan_mlbl_skc_board_info({
          id: props.params.id,
          inquiryPeriodDetailId: props.params.inquiryPeriodDetailId
        })
  if (success) {
    state.form = data
    state.url = data.url ? data.url : ''
  }
}

function formatByOptions(item, value) {
  let formatValue = JSON.parse(JSON.stringify(value))
  if (item.options) {
    item.options.forEach(item => {
      if (item.value === value) {
        formatValue = item.label
      }
    })
  }
  return formatValue
}
function getImages(record) {
  const imgs = []
  if (record.materialOssRelations && record.materialOssRelations.length > 0) {
    record.materialOssRelations.forEach(item => {
      imgs.push(item.ossUrl)
    })
  }
  return imgs
}
async function getCyList() {
  const { success, data } = await preparation_plan_mlbl_skc_board_list(
    state.queryParams
  )
  if (success) {
    state.spDataSource = data
  }
}
</script>

<style lang="scss" scoped>
.desc {
  display: flex;
  align-items: center;
}
.kanban {
  flex: 1;
  font-size: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  &-desc {
    display: flex;
    align-items: center;
    &-label {
      font-weight: bold;
    }
  }
}
</style>
